<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cnbu jquery</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<style>
body {
	background: #fff;
	font-family: Arial;
	height: 2000px;
}

ul#menu {
	position: fixed;
	top: 100px;
	left: 0px;
	z-index: 9999;
	list-style: none;
	margin: 0px;
	padding: 0px;
}

ul#menu li {
	width: 100px;
	margin-bottom: 2px;
}

ul#menu li a {
	background-color: #ccc;
	color: #fff;
	text-decoration: none;
	display: block;
	width: 90px;
	padding: 10px 0 10px 10px;
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	margin-left: -1px;
	opacity: 0.6;
}

ul#menu .cnbu1 a {
	background: #DD2B2F;
}

ul#menu .cnbu2 a {
	background: #FF8102;
}

ul#menu .cnbu3 a {
	background: #FFCC00;
}

ul#menu .cnbu4 a {
	background: #00CC99;
}

ul#menu .cnbu5 a {
	background: #3399CC;
}

ul#menu .cnbu6 a {
	background: #9900CC;
}

ul#menu .cnbu7 a {
	background: #CC99FF;
}

ul#menu .cnbu8 a {
	background: #000000;
}

ul#menu .cnbu9 a {
	background: #0000ff;
}
</style>
</head>
<body>
	<p align="center"><h1>9개의 야구 구단정보를 소개해 드립니다.</h1></p>
	<ul id="menu" style="height: 520px; width: 869px;">
		<li class="cnbu1"><a href="samsung.jsp">삼성</a></li>
		<li class="cnbu2"><a href="nexen.jsp">넥센</a></li>
		<li class="cnbu3"><a href="lg.jsp">LG</a></li>
		<li class="cnbu4"><a href="doosan.jsp">두산</a></li>
		<li class="cnbu5"><a href="nc.jsp">NC</a></li>
		<li class="cnbu6"><a href="lotte.jsp">롯데</a></li>
		<li class="cnbu7"><a href="sk.jsp">SK</a></li>
		<li class="cnbu8"><a href="hanwha.jsp">한화</a></li>
		<li class="cnbu9"><a href="kia.jsp">기아</a></li>		
		</ul>
		<input type="image" src="image/mascote.jpg" style="height: 500px; width: 900px;">



		<script type="text/javascript">
			$(function() {
				$('#menu a').css('marginLeft', '-85px');
				$('#menu > li').hover(function() {
					$('a', $(this)).stop().animate({
						'marginLeft' : '-1px'
					}, 300);
				}, function() {
					$('a', $(this)).stop().animate({
						'marginLeft' : '-85px'
					}, 300);
				});

			});
		</script>
</body>
</html>
